<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Leaflet</title>
    <link rel="stylesheet" href="leaflet.css" />
    <script src="leaflet.js"></script>
    <!--叶片状蚂蚁路径-->
    <script src="plugins/leaflet-ant-path.js"></script>
    <!--方向插件-->
    <script src="plugins/leaflet.rotatedMarker.js"></script>
    <style>
      html,
      body {
        margin: 0;
        padding: 0;
        height: 100%;
      }

      #search {
        height: 60px;
        width: 100%;
        position: fixed;
        top: 0;
        left: 0;
        background: #000000;
        z-index: 10000000;
      }

      #search-btn,
      #stop-btn {
        cursor: pointer;
      }

      #map {
        height: 100vh;
      }
    </style>
  </head>

  <body>
    <div id="search">
      <input id="search-input" />
      <button id="search-btn">搜索</button>
      <button id="stop-btn">停止</button>
    </div>
    <div id="map"></div>

    <script>
      let map = null;

      function setPolyLine(id, center, points) {
        if (map) {
          map.remove();
        }

        map = L.map(id).setView(center, 13);

        L.tileLayer("http://{s}.tile.osm.org/{z}/{x}/{y}.png", {
          minZoom: 7,
          maxZoom: 16,
          attribution:
            '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
        }).addTo(map);

        if(points.length === 0 ){
          alert("无运动轨迹");
          return;
        }

        L.marker(points[0], {
          icon: L.icon({
            iconUrl: "./icons/begin.png", // 图标图片的URL
            iconSize: [32, 32], // 图标的大小
            iconAnchor: [15, 15], // 图标的锚点，即图标的位置应该放置在地图上的位置
            popupAnchor: [-3, -76] // 弹出框的锚点，即当你点击图标时，弹出框应该出现在哪个位置
          })
        }).addTo(map);

        L.polyline
          .antPath(points, {
            color: "#006600",
            fillColor: "#006600",
            pulseColor: "#e5ffe5",
            opacity: 6,
            delay: 10000,
            dashArray: [5, 30]
          })
          .addTo(map);

        L.marker(points[points.length - 1], {
          icon: L.icon({
            iconUrl: "./icons/end.png", // 图标图片的URL
            iconSize: [32, 32], // 图标的大小
            iconAnchor: [15, 15], // 图标的锚点，即图标的位置应该放置在地图上的位置
            popupAnchor: [-3, -76] // 弹出框的锚点，即当你点击图标时，弹出框应该出现在哪个位置
          })
        }).addTo(map);
      }

      const points = [
        [39.898457, 116.391844],
        [39.898595, 116.377947],
        [39.898341, 116.368001],
        [39.898063, 116.357144],
        [39.899095, 116.351934],
        [39.905871, 116.35067],
        [39.922329, 116.3498],
        [39.931017, 116.349671],
        [39.939104, 116.349225],
        [39.942233, 116.34991],
        [39.947263, 116.366892],
        [39.947568, 116.387537],
        [39.947764, 116.401988],
        [39.947929, 116.410824],
        [39.947558, 116.42674],
        [39.9397, 116.427338],
        [39.932404, 116.427919],
        [39.923109, 116.428377],
        [39.907094, 116.429583],
        [39.906858, 116.41404],
        [39.906622, 116.405321],
        [39.906324, 116.394954],
        [39.906308, 116.391264],
        [39.916611, 116.390748]
      ];

      setPolyLine("map", [39.898457, 116.391844], points);
    </script>
  </body>
</html>
